<template>
  <!-- 添加或修改重车作业单申报管理对话框 -->
  <el-dialog 
    :title="title" 
    :visible.sync="dialogVisible" 
    width="60%" 
    append-to-body 
    :close-on-click-modal="false"
    @close="close"
    >
    <el-form 
      ref="form" 
      :model="form" 
      :rules="rules" 
      label-width="89px" 
      label-position="right"
       class="flex-form"
      size="small"
      >
      <el-form-item label="进出口" prop="iEFlag">
        <el-select 
          v-model.trim="form.iEFlag" 
          @change="iEFlagChange" 
          placeholder="请选择进出口类型">
          <el-option 
            v-for="dict in dict.type.sys_i_e_flag" 
            :key="dict.value" 
            :label="dict.value + '-' + dict.label"
            :value="dict.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型" prop="businessType">
        <el-select 
          v-model.trim="form.businessType" 
          @change="businessTypeChange" 
          placeholder="请选择业务类型">
          <el-option 
            v-for="dict in businessTypeList" 
            :key="dict.value" 
            :label="dict.label"
            :value="dict.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="批次号" prop="manifestId">
        <el-input v-model.trim="form.manifestId" placeholder="请输入批次号" />
      </el-form-item>
      <el-form-item label="起始地" prop="workFieldCode">
        <el-select v-model.trim="form.workFieldCode" @change="workFieldCodeChange" placeholder="请选择起始地">
          <el-option v-for="dict in selectBaseFieldInfoList" :key="dict.value" :label="dict.value + '-' + dict.label"
            :value="dict.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="目的地" prop="gateFieldCode" v-show="gateFieldItemShow">
        <el-select v-model.trim="form.gateFieldCode" @change="gateFieldCodeChange" placeholder="请选择目的地">
          <el-option v-for="dict in selectGateBaseFieldInfoList" :key="dict.value" :label="dict.value + '-' + dict.label"
            :value="dict.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="报关企业" prop="declCopCode">
        <el-select v-model.trim="form.declCopCode" filterable clearable placeholder="请选择报关企业">
          <el-option v-for="dict in selectBgEntInfoList" :key="dict.value" :label="dict.label"
            :value="dict.value"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="货主企业" prop="cargoOwnCode">
        <el-select v-model.trim="form.cargoOwnCode" filterable clearable placeholder="请选择货主企业">
          <el-option v-for="dict in selectHzEntInfoList" :key="dict.value" :label="dict.label"
            :value="dict.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="货物类别" prop="goodsType">
        <el-select v-model.trim="form.goodsType" filterable clearable placeholder="请选择货物类别">
          <el-option v-for="dict in dict.type.bills_goods_category" :key="dict.value" :label="dict.label"
            :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="ui-basic-content">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="商品列表" name="tabGoods">
          <!-- 货物信息 -->
          <tab-goods ref="addTabGoods" :dialogType="dialogType" :editGoodsData="editGoodsList"></tab-goods>
        </el-tab-pane>
        <el-tab-pane label="车辆列表" name="tabVehicle">
          <!-- 运输工具信息 -->
          <tab-vehicle ref="addTabVehicle" :dialogType="dialogType" :editVehicleData="editVehicleList"
            :editContaData="editContaList"></tab-vehicle>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  add
} from "@/api/billsdecl/gTransitBills";
import tabGoods from "./tabGoods.vue";
import tabVehicle from "./tabVehicle.vue";
import { findBaseFieldInfo, getBaseFieldInfo } from "@/api/system/baseFieldInfo";
import { findBusinessTypeList } from "@/api/billsdecl/billBusinessType";
import { findListEnterpriseInfo } from "@/api/system/enterpriseInfo";

export default {
  name: "GHeavyBills-addEdit",
  components: {
    tabGoods,
    tabVehicle
  },
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    rowData: {
      type: Object,
      default: () => { },
    },
    dict: {}
  },
  data() {
    return {
      // 弹出层
      dialogVisible: false,
      activeName: 'tabGoods',
      //编辑ID
      editPlatSeqNo: null,
      //国门场所显示
      gateFieldItemShow: false,
      gateFieldLable: '入境国门',
      //单证分类，1-重车类型
      billCategory: '6',
      userCustomsCode: this.$store.state.user.userLoginInfo.customsCode,
      userFieldCode: this.$store.state.user.userLoginInfo.fieldCode,
      // 标题
      title: "新增",
      //下来场所列表
      selectBaseFieldInfoList: [],
      //国门场所代码
      selectGateBaseFieldInfoList: [],
      //下来报关企业列表
      selectBgEntInfoList: [],
      //下来货主企业列表
      selectHzEntInfoList: [],
      //选择业务类型
      businessTypeList: [],
      // 表单参数
      form: {
        platSeqNo: null,
        manifestId: null,
        workFieldCode: null,//作业场所
        gateFieldCode: null,//国门场所
        declCopCode: null,
        declCopName: null,
        cargoOwnCode: null,
        cargoOwnName: null,
        iEFlag: null,
        billType: null,
        businessType: null,
        goodsType: null,
        remark: null
      },
      detailData: null,

      //编辑反写货物列表
      editGoodsList: [],
      //编辑反写车辆列表
      editVehicleList: [],
      //编辑反写集装箱列表
      editContaList: [],

      // 重车作业单申报管理表格数据
      gHeavyBillsList: [],
      // 表单校验
      rules: {
        manifestId: [{
          required: true,
          message: "批次号不能为空",
          trigger: "blur"
        }],

        workFieldCode: [{
          required: true,
          message: "起始地场所不能为空",
          trigger: "blur"
        }],
        gateFieldCode: [{
          required: false,
          message: "目的地场所不能为空",
          trigger: "blur"
        }],
        iEFlag: [{
          required: true,
          message: "进出口不能为空",
          trigger: "blur"
        }],
        businessType: [{
          required: true,
          message: "业务类型不能为空",
          trigger: "change"
        }],
        goodsType: [{
          required: true,
          message: "货物类别不能为空",
          trigger: "blur"
        }],
      }
    };
  },
  methods: {
    open(plateSeqNo) {
      this.initData();
      this.$nextTick(() => {
        if (this.dialogType == "add") {
          this.title = "新增";
          this.dialogVisible = true;
        } else if (this.dialogType == "edit") {
          this.title = "编辑";
          this.editPlatSeqNo = plateSeqNo;
          this.loadDetail();
        } else if (this.dialogType == "detail") {
          this.title = "详情";
          this.editPlatSeqNo = plateSeqNo;
          this.loadDetail();
        }
        this.getLoadBaseFieldInfoList();
        this.getLoadUserField();
        this.getLoadEntInfoList();
      });
    },
    //初始化数据
    initData() {
      // 运货作业单表格数据
      this.gTakecargoBillsList = [];
      //编辑反写货物列表
      this.editGoodsList = [];
      //编辑反写车辆列表
      this.editVehicleList = [];
      //编辑反写集装箱列表
      this.editContaList = [];
    },
    //加载用户场所信息
    getLoadUserField() {
      if (null == this.userFieldCode) {
        return;
      }
      getBaseFieldInfo(this.userFieldCode).then((res) => {
        if (res.code == 200) {
          //this.form = res.data;
          this.form.workFieldCode = this.userFieldCode;
          if (res.data.fieldType == '3') {//后置场所
            this.rules.gateFieldCode[0].required = true;
            this.gateFieldItemShow = true;
          }
        }
      });
    },
    //获取场所下拉列表
    getLoadBaseFieldInfoList() {
      findBaseFieldInfo({ customsCode: this.userCustomsCode, iEFlag: this.form.iEFlag }).then(response => {
        this.selectBaseFieldInfoList = response.data;
        if (this.selectBaseFieldInfoList != null && this.selectBaseFieldInfoList.length == 1) {
          this.form.workFieldCode = this.selectBaseFieldInfoList[0].value;
        }
        if (this.selectBaseFieldInfoList.length > 0) {
          this.selectGateBaseFieldInfoList = this.selectBaseFieldInfoList.filter(n => "2" == n.extVal1);
        }

      })
    },
    //获取企业下拉列表
    getLoadEntInfoList() {
      findListEnterpriseInfo({}).then(response => {
        let entList = response.data;
        if (entList != null && entList.length > 0) {
          this.selectBgEntInfoList = entList.filter(n => "1" == n.extVal1);
          this.selectHzEntInfoList = entList.filter(n => "2" == n.extVal1);
        }
      })
    },
    //获取业务类型列表
    getLoadBusinessTypeList() {
      findBusinessTypeList({ iEFlag: this.form.iEFlag, billCategory: this.billCategory }).then(response => {
        this.businessTypeList = response.data;
        if (this.businessTypeList.length == 1) {
          this.form.businessType = this.businessTypeList[0].value;
        }
      })
    },

    //进出口类型变更
    iEFlagChange(val) {
     // this.form.businessType = null;
      // if ("I" == val) {
      //   this.gateFieldLable = '入境国门';
      // } else {
      //   this.gateFieldLable = '出境国门';
      // }

      this.getLoadBusinessTypeList()
    },
    businessTypeChange(val) {
      /* if('7'==val){
         this.rules.manifestId[0].required=false;
       }
       */
      // this.getLoadBusinessTypeList()
    },
    //作业场所变更
    workFieldCodeChange(workFieldCode) {
      let workField = this.selectBaseFieldInfoList.filter(n => workFieldCode == n.value)[0];
      if (workField.extVal1 == '1') {//口岸货场
        this.gateFieldItemShow = false;
        this.rules.gateFieldCode[0].required = false;
      } else if (workField.extVal1 == '2') {//国门
        this.gateFieldItemShow = false;
        this.rules.gateFieldCode[0].required = false;
      } else if (workField.extVal1 == '3') {//后置
        this.rules.gateFieldCode[0].required = true;
        this.gateFieldItemShow = true;
      }
    },
    //国门变更
    gateFieldCodeChange(gateFieldCode) {
      let gateField = this.selectBaseFieldInfoList.filter(n => gateFieldCode == n.value)[0];
      if (gateField.extVal1 != '2') {
        this.form.gateFieldCode = null;
        this.$modal.msgWarning("选择场所不是国门");
        return;
      }
    },



    close() {
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    },

    // 获取详情
    loadDetail() {
      getEditGHeavyBills(this.editPlatSeqNo).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.getLoadBusinessTypeList();
          //反写货物列表
          this.editGoodsList = res.data.goodsList;
          //反写车辆列表
          this.editVehicleList = res.data.vehicleList;
          //反写集装箱列表
          this.editContaList = res.data.contaList;
          this.dialogVisible = true;
        }
      });
    },

    // 提交表单
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const reqParams = Object.assign({}, this.form, {
            containerVOS: this.$refs.addTabVehicle.vahicleContaList,
            vehicleVOS: this.$refs.addTabVehicle.submitVehicleList,
            goodsVOS: this.$refs.addTabGoods.tableData
          })

          if (this.dialogType == "add") {
            console.log('request', reqParams);
            add(reqParams).then(res => {
              if (res.code === 200) {
                this.$modal.msgSuccess("新增成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          } else {
            params.id = this.rowData.id;
            updateGHeavyBills(params).then(res => {
              if (res.code === 200) {
                this.$modal.msgSuccess("修改成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
